var LunchCard = function(name, image) {
	var defaultMeal = "Ate Nothing";
	var foodValuesArray = new Array("Too Little", "A Little", "Normal", "A Lot", "Too Much");

	this.getLunchID = function() {
		return this.name.replace(/ /g, "_") + "-" + "lunch";
	};

	this.getSelectID = function() {
		return this.name.replace(/ /g, "_") + "-" + "lunch-select";
	};

	this.getSliderID = function() {
		return this.name.replace(/ /g, "_") + "-" + "lunch-slider";
	};

	this.getCommentID = function() {
		return this.name.replace(/ /g, "_") + "-" + "select-comment";
	};

	this.name = name;
	this.image = image;
	this.id_div = $('<div></div>');
	this.id_div.addClass('lunchcard');
	this.id_div.attr('id', this.getLunchID(this.name));
	//insert html text into div - need to find the best way to do this
	//id will look like ID.html
	var html_text = '<img src= ' + this.image + ' class=picture alt= ' + this.name + ' />' + '<span class=name>' + this.name + '</span>';
	html_text += '<span class=mealListParent><select id=' + this.getSelectID() + ' class=mealList>';
	html_text += '<option value = "default" selected="selected">' + defaultMeal + '</option></select></span>';
	html_text += '<div class="r_log"><span class= "foodLabel">How Much?</span>';
	html_text += '<div class=slider id=' + this.getSliderID() + '></div></div>';
	html_text += '<div class=comment>' + '<textarea name=' + this.getCommentID() + ' placeholder=Comments></textarea>' + '</div></div>';
	this.id_div.html(html_text);

	this.getDiv = function() {
		return this.id_div;
	};

	this.createSlider = function() {
		var select = $('#' + this.getSelectID());
		var sliderSelector = $('#' + this.getSliderID());
		var slider = sliderSelector.slider({
			disabled : true,
			slide : function(event, ui) {
				/* Grab the slider value and set the tooltip's content.text property as it */

				handle.qtip('option', 'content.text', '' + foodValuesArray[ui.value]);

			},
			min : 0,
			max : 4,
			value : 2
		});

		/* Grab and cache the newly created slider handle */
		var handle = $('.ui-slider-handle', slider);

		/*
		 * Selector needs changing here to match your elements.
		 *
		 * Notice the second argument to the $() constructor, which tells
		 * jQuery to use that as the top-level element to seareh down from.
		 */
		handle.qtip({
			content : '' + foodValuesArray[slider.slider('option', 'value')], // Use the current value of the slider
			position : {
				my : 'bottom center',
				at : 'top center',
				container : handle // Stick it inside the handle element so it keeps the position synched up
			},
			hide : {
				delay : 250 // Give it a longer delay so it doesn't hide frequently as we move the handle
			},
			style : {
				classes : 'ui-tooltip-slider',
				widget : true // Make it Themeroller compatible
			}
		}).append("<span class='ui-icon ui-icon-grip-dotted-vertical'></span>");

		sliderSelector.slider({
			disabled : true
		});
		select.change(function() {
			if(this.selectedIndex == 0) {
				sliderSelector.slider({
					disabled : true
				});
			} else {
				sliderSelector.slider({
					disabled : false
				});
			}
		});
		for(var i = 0; i < 4; i++) {
			var tick = $('<div class="tick ui-widget-content"></div>').appendTo(slider);
			tick.css({
				left : (25 * (i + 1)) + '%',
			});
		}
	};
};
